<template>
  <div>
    <NavBarVue :title="'收到的赞和收藏'"></NavBarVue>
    <view class="collectul">
      <view class="collectli" v-for="item in list" :key="item.id">
        <BaseCoverImage :src="item.img" style="width: 40px;height: 40px;border-radius: 25px;"/>
        <view class="li_center">
          <p style="font-size: 14px;">{{item.name}}</p>
          <view class="li_div">赞了你的笔记&nbsp;&nbsp;02-18</view>
        </view>
        <BaseCoverImage :src="item.img" style="width: 40px;height: 40px;"/>
      </view>
    </view>
  </div>
</template>

<script setup>
import NavBarVue from '../../../components/NavBar.vue';
import {ref} from 'vue'

const list = ref([
  {id: 1, name: '一盒子', img: '/static/images/1002.png', time: '02-03'},
  {id: 2, name: '贺小鲜', img: '/static/images/1003.png', time: '02-03'},
  {id: 3, name: '大王大王wong', img: '/static/images/1004.png', time: '02-03'},
  {id: 4, name: '烦死了把你们豆沙漏', img: '/static/images/1005.png', time: '02-03'},
  {id: 5, name: '集结号', img: '/static/images/1006.png', time: '02-03'},
  {id: 6, name: '世界你好', img: '/static/images/1001.png', time: '02-03'},
])
</script>

<style scoped lang="scss">
.collectul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20rpx;

  .collectli {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;

    .li_center {
      width: 270px;
      height: 55px;
      margin-left: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}


.li_div {
  font-size: 12px;
  color: #aaa;
}
</style>